<!--
 * @Description: 网站入口layout
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-07
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-12
-->
<script lang="ts" setup>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'

  import { useKeepAliveStore } from '/@/store/modules/keepAlive'

  import Footer from '../components/footer.vue'
  import Header from '../components/header.vue'

  const route = useRoute()
  const keepAliveStore = useKeepAliveStore()
  const keepAliveComponents = computed(() => keepAliveStore.list)
</script>

<template>
  <div class="layout">
    <div class="layout-header">
      <Header />
    </div>
    <div class="layout-main">
      <router-view v-slot="{ Component }">
        <template v-if="Component">
          <transition :name="Object.is(route.meta?.transitionName, false) ? '' : 'fade-transform'" mode="out-in" appear>
            <keep-alive :include="keepAliveComponents">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </transition>
        </template>
      </router-view>
    </div>
    <div class="layout-footer">
      <Footer />
    </div>
  </div>
</template>

<style lang="less" scoped>
  .layout {
    height: 100%;
    position: relative;

    .layout-header {
      position: absolute;
      z-index: 98;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background: #f6f9fe;
    }

    .layout-main {
      min-height: 100vh;
      padding-top: 60px;
      overflow: auto;
    }
  }
</style>
